<template>
  <div class="home">
    <!-- <button @click="onclick">点我显示</button> -->
    <Loading v-show="isShow"></Loading>
    <Message v-show="isShowMessage"></Message>
    <!-- <button @click="onMessage">我是一条消息</button> -->

    <!-- <button @click="onClickAlert">点击出现弹出框</button> -->
    <Swiper></Swiper>
    <Tw></Tw>
    <Details></Details>
    <!-- <Tabbar></Tabbar> -->
    <Special></Special>
    <!-- <About></About> -->
    <!-- <Jump></Jump> -->
    <Popularity></Popularity>

    <!-- <Alert v-show="isShowAlert"></Alert> -->
  </div>
</template>
<script>
// 每次使用一个文件夹都要引用
import Loading from "../components/loading/Loading"; //缓冲gif图片
import Message from "../components/message/Message"; //弹框我是一条消息
// import Alert from "../components/alert/Alert";
import Swiper from "../components/swiper/Swiper"; //轮播图
import Tw from "../components/tw/Tw"; //签到栏
import Bargain from "../components/bargain/Bargain"; //砍价列表
import Details from "../components/details/Details";
// import Tabbar from "../components/tabbar/Tabbar"; //底部切换栏
import Special from "../components/special/Special"; //精选专题
import About from "../components/about/About"; //严选专栏
import Jump from "../components/about/Jump"; //专栏详情
import Popularity from "../components/popularity/Popularity"; //专栏详情

export default {
  data() {
    return {
      isShow: false,
      isShowMessage: false,
      // isShowAlert: false,
    };
  },
  components: {
    Loading,
    Message,
    Swiper,
    Tw,
    Bargain,
    Details,
    // Tabbar,
    Special,
    About,
    Jump,
    // Alert,
    Popularity,
  },
  methods: {
    onclick() {
      this.isShow = true;
      setTimeout(() => {
        this.isShow = false;
      }, 1000);
    },
    onMessage() {
      this.isShowMessage = true;
      setTimeout(() => {
        this.isShowMessage = false;
      }, 2000);
      this.$API.getSwiper().then((res) => {
        console.log(res);
      });
    },
    onClickAlert() {
      console.log(111);
      this.isShowAlert = true;
      setTimeout(() => {
        this.isShowAlert = false;
      }, 3000);
      // this.$API.getSwiper().then((res) => {
      //   console.log(res);
      // });
    },
  },
  mounted() {
    this.$API.getSwiper().then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  margin-bottom: 1.2rem;
}
</style>